<template>
  <div class="hotelRoom">
    <TopBack title="商家详情"></TopBack>
    <!-- <h1>房间详情 {{id}}</h1> -->
    <div v-for="(item, index) in hotel" :key="index">
      <div class="pic">
        <img :src="item.indexImage" alt="" />
      </div>
      <div class="detail">
        <p class="hotelName clearfix">
          {{ item.name }}
          <span>（{{ item.hotelType }}）</span>
          <van-rate
            v-model="value"
            :size="25"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            :count="1"
          />
        </p>

        <p class="address clearfix">
          {{ item.adress }}
          <a href="#" @click="addCollect"
            >地图/导航 <van-icon name="arrow" color="#C5C5C5"
          /></a>
        </p>
        <!-- <hr> -->
        <div class="line"></div>
        <p class="startTime">
          2019年开业
          <span>公益商家</span>
          <span>有棋牌室</span>
          <a href="#">详情/设施 <van-icon name="arrow" color="#C5C5C5" /></a>
        </p>
        <p class="serve">
          <span
            ><img src="../../assets/image/hotel/breakfast.png" alt="" />
            中餐厅</span
          >
          <span
            ><img
              src="../../assets/image/hotel/park.png"
              alt=""
            />有免费停车场</span
          >
          <span
            ><img
              src="../../assets/image/hotel/xingli.png"
              alt=""
            />行李免费寄存</span
          >
        </p>
      </div>
    </div>
    <div class="room">
      <p class="time clearfix">
        <span>{{ start }}</span
        >入住 - <span>{{ end }}</span
        >离店
        <a href="#">共{{ sum }}晚 <van-icon name="arrow" color="#C5C5C5" /></a>
      </p>
      <div class="roomType" v-for="item in room" :key="item.roomId">
        <div>
          <van-card
            :price="item.price + '.00'"
            desc="入住当天18点前可免费取消"
            :title="item.roomType"
            :thumb="item.images"
            tag="猜你喜欢"
          >
            <!-- <template #tags>
                            <div v-for="(item1,index) in serve" :key="index">
                                <van-tag plain type="danger">{{item1.peopleNum}}入住</van-tag>
                            <van-tag plain type="danger">面积{{item1.area}}</van-tag>
                            </div>
                        </template> -->
            <template #bottom>
              <van-button class="skip" @click="add(item.roomId)"
                >详情</van-button
              >
            </template>
            <template #tags>
              <van-tag plain type="danger">极速退款</van-tag>
            </template>
            <template #footer>
              <van-button class="book" size="mini" @click="book(item.roomId)"
                >订</van-button
              >
            </template>
            <template #price-top>
              <p class="zaofan">
                2份早餐 <span>40-45㎡</span> <span>大床</span>
                <span>2人入住</span>
              </p>
            </template>
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../../components/TopBack.vue";
import { getAllProductList } from "../../api/hotelApi.js";
import { getRoomType,changeRoom } from "../../api/roomApi.js";
import { getServeType } from "../../api/ServeApi";
import { Toast } from "vant";
export default {
  components: { TopBack },
  data() {
    return {
      id: "",
      hotel: [], //酒店信息
      value: 1, // 收藏
      room: [], // 房间
      serve: [], // 服务
      hotelId: "",
      roomId: "",
      serveId: "",
      start: "",
      end: "",
      sum: "",
    };
  },

  created() {
    this.id = this.$route.query.id;
    this.start = this.$route.query.start;
    this.end = this.$route.query.end;
    this.sum = this.$route.query.sum;
    // this.start=(new Date(this.start).getTime())
    // console.log(this.start);
  },
  mounted() {
    getAllProductList().then((res) => {
      this.hotel = res.data;
      var hotelList = this.hotel.filter((item) => {
        return item.hotelId == this.id;
      });
      this.hotel = hotelList;
      this.hotelId = hotelList[0].hotelId;
      // console.log(this.hotelId);
    });

    getRoomType().then((res) => {
      this.room = res.data;
      // console.log(this.room);
      this.room = this.room.filter((item) => {
        return item.hotelId == this.id;
      });
    });
    // 有问题，最后在搞 生命周期 数据需要更改
    getServeType().then((res) => {
      this.serve = res.data;
      // console.log(this.serve);
      this.serve = this.serve.filter((item) => {
        return item.roomId == this.roomId || item.hotelId == this.hotelId;
      });
      // this.serveId=this.serve[0].serveId
      // console.log(this.serve[0]);
      // console.log(this.serve[0].breakfast);
    });
  },
  methods: {
    addCollect() {
      if (this.scllect == true) {
        Toast.fail("收藏过了");
      } else {
        this.$bus.$hotel.push(this.hotel);
        this.scllect = true;
        Toast.success("收藏成功");
      }
    },
    add(index) {
      this.$router.push({
        path: "/serve",
        query: {
          hotelId: this.hotelId,
          roomId: index,
          start: this.start,
          end: this.end,
          sum: this.sum,
        },
      });
    },
    // 预订
    book(index) {
      var thisRoom = this.room.filter((res) => res.roomId == index);
      var startime=this.start
      var endtime=this.end
      var startid=''
      var endid=''
      thisRoom[0].date.filter(
        function(res,index) {
         if( res.dataTime ==startime){
           startid=index
         }
        }
      );
     thisRoom[0].date.filter( function(res,index) {
         if( res.dataTime ==endtime){
           endid=index
         }         
        })
      for(var i=startid;i<=endid-1;i++){
       if(thisRoom[0].date[i].count<=0){
          Toast.fail('该房间已满')
          // console.log('对不起该时间段房间库存不足');
        }else{
          thisRoom[0].date[i].count--;
          // console.log(thisRoom[0].date[i]);
          changeRoom({change:thisRoom}).then()
           this.$router.push({
        path: "/book",
        query: {
          hotelId: this.hotelId,
          roomId: index,
          start: this.start,
          end: this.end,
          sum: this.sum,
        },
      });
        }
    
        }
    //  console.log(thisRoom);
    },
  },
};
</script>

<style lang="less" scoped>
.hotelRoom {
  background-color: #f5f6f8;
}
.pic {
  width: 100%;
  height: 250px;
  margin-bottom: -40px;
  img {
    width: 100%;
    height: 100%;
    margin-top: -40px;
  }
}
.detail {
  height: 110px;
  line-height: 20px;
  padding: 16px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
  .hotelName {
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    span {
      font-size: 12px;
    }
    .van-rate {
      float: right;
      margin-right: 20px;
    }
  }
  .address {
    font-size: 14px;
    margin: 0;
    a {
      font-size: 12px;
      color: #033e98;
      float: right;
    }
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: #efefef;
    margin: 5px 0;
  }
  .startTime {
    font-size: 14px;
    span {
      font-size: 10px;
      display: inline-block;
      width: 52px;
      height: 16px;
      line-height: 16px;
      color: #033e98;
      border: 1px solid #5b87ca;
      margin-left: 5px;
      border-radius: 3px;
    }
    a {
      font-size: 12px;
      color: #033e98;
      float: right;
    }
  }
  .serve {
    font-size: 12px;
    color: #797979;
    margin: -8px 0;
    span {
      vertical-align: middle;
      margin-right: 8px;
      img {
        vertical-align: middle;
        width: 15px;
        height: 15px;
        margin-bottom: 2px;
      }
    }
  }
}
.room {
  // width:100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 16px;
  .time {
    font-size: 14px;
    a {
      font-size: 12px;
      color: #033e98;
      float: right;
    }
  }
}
.roomType {
  background-color: #fff;
  .van-card {
    position: relative;
    .van-card__title {
      font-size: 16px;
      font-weight: bold;
    }
    .van-card__desc {
      color: #1b9196;
    }
    .van-tag--danger.van-tag--plain {
      position: absolute;
      top: 70px;
      left: 65px;
      color: #fff;
    }
    .van-tag--mark {
      color: #033e98;
    }
    .van-tag--danger {
      background-color: #ffcc4e;
    }
    .van-card__price {
      color: red;
    }
    .book {
      position: absolute;
      top: 50px;
      right: 0px;
      width: 40px;
      height: 40px;
      color: #fff;
      background-color: #ff565f;
      border-radius: 6px;
      font-size: 16px;
    }
    .skip {
      position: absolute;
      top: 52px;
      right: 30px;
      width: 60px;
      height: 50px;
      background-color: #fff;
      border: 0;
      color: sandybrown;
      font-size: 12px;
    }
    .zaofan {
      position: absolute;
      top: 20px;
      left: 0;
    }
  }
}
</style>
